<template>
	<view class="box bg-f7">
		<view class="bg-white padding-b-30">
			<view class="img-box">
				<image :src="info.image" mode="widthFix"></image>
			</view>
			<view class="padding-l-r-30 bg-white ">
				<view class="fs-32 color-0 fw-b title-box">{{info.title}}</view>
				<view class="color-33 fs-24">
					讲座时间：{{info.start_time}}
				</view>
			</view>
		</view>
		<view class="bg-white margin-t-20">
			<view class="padding-30">
				<view class="fs-32 fw-b color-0 margin-b-20">
					简介
				</view>

                <view v-if="info.video_file" class="margin-t-20">
                    <video style="width: 100%;" :src="info.video_file" controls="true" autoplay></video>
                </view>
                <view class="margin-t-20">
                    <u-parse :content="info.content"></u-parse>
                </view>
			</view>
		</view>
		<view class="btn-box  padding-30 align-items-center justifyContent-spaceBetween">
			<button @click="shareToFriend" class="btn-share-friend align-items-center" open-type="share">
				<image src="/static/image/culturalPropaganda/share.png" mode="widthFix" s></image>
				<view class="fs-28 color-43 margin-l-10">分享给好友</view>
			</button>
			<button v-if="info.is_sign" @click="sign" class="btn-sign color-white bg-db fs-28">我要报名</button>
			<button v-else @click="sign" class="btn-sign color-white bg-43 fs-28">我要报名</button>
		</view>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	import toast from '@/components/toast/index'
	import {
		publicityDetail,
		publicitySign
	} from "@/api/culturalPropaganda"
	export default {
		components: {
			toast
		},
		data() {
			return {
				info: {
					title: '糖尿病医疗知识科普关注糖尿病并发症 守护健康防线',
					time: ' 5月31日 10:00',
					status: 0,
					id: 2,
					imgSrc: 'https://img.tusij.com/ips_templ_preview/2020-09-21/5a/5a6d4830-eadf-48f3-afb8-639b9f810ed0.jpg?auth_key=2372214725-0-0-617764293cc87c2b7711ebefa5667d82&x-oss-process=image/resize,m_fixed,h_1245,w_700/crop,x_0,y_476,w_700,h_700'
				}
			}
		},
		onLoad(e) {
			this.id = e.id
		},
		onShow() {
			this.initInfo()
		},
		methods: {
			initInfo() {
				publicityDetail({
					publicity_id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			sign() {
				if(this.info.is_sign){
					return uni.showToast({
						icon:"none",
						title:'已报名，无需重新报名'
					})
				}
				publicitySign({
					publicity_id: this.info.id
				}).then(res => {
					if (res.code == 1) {
						this.getInfo()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 分享给好友
			// shareToFriend() {
			// 	wx.shareToTimeline({
			// 		title: '分享到朋友圈',
			// 		link: '你的小程序链接',
			// 		imgUrl: '你的图片链接',
			// 		success: function() {
			// 			console.log('分享到朋友圈成功');
			// 		},
			// 		fail: function(err) {
			// 			console.log('分享到朋友圈失败', err);
			// 		}
			// 	});
			// },
			shareToFriend() {
				uni.shareAppMessage({
					title: this.info.title || '科普讲座详情',
					path: `/pagesA/culturalPropaganda/scienceDetails?title=${encodeURIComponent(this.info.title)}&time=${encodeURIComponent(this.info.time)}&imgSrc=${encodeURIComponent(this.info.imgSrc)}`,
					imageUrl: this.info.imgSrc,
					success: () => {
						console.log('分享给好友成功');
					},
					fail: (err) => {
						console.error('分享给好友失败', err);
					}
				});
			},
			getInfo() {
				this.$refs.toast.getInfo(true, ['您已成功报名'], '我知道了')
			}
		},
	}
</script>

<style lang="scss" scoped>
.box {
    padding-bottom: 180rpx;
}
	.img-box {
		imag {
			width: 100%;
		}
	}

	.title-box {
		padding: 30rpx 0 20rpx;
		line-height: 1.6;
	}

	.btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 162rpx;
		padding: 10rpx 30rpx;
		background: #FFFFFF;

		.btn-sign {
			width: 400rpx;
			height: 90rpx;
			border-radius: 45rpx;
			line-height: 90rpx;
			border: 0;
		}

		image {
			width: 38rpx;
		}

		.btn-share-friend {
			justify-content: center;
			width: 270rpx;
			height: 90rpx;
			padding: 0;
			background: #EFFBFE;
			border-radius: 45rpx;
			border: 1px solid #43ABC4;
		}

	}
</style>